import { useState } from "react";
import styles from "../happle/PosterSection.module.css";

// 导入图片
import img1 from "../koople/images/img1.jpg";
import img2 from "../koople/images/img2.jpg";
import img3 from "../koople/images/img3.jpg";
import img4 from "../koople/images/img4.jpg";
import img5 from "../koople/images/img5.jpg";
import img6 from "../koople/images/img6.jpg";
import img7 from "../koople/images/img7.jpg";
import img8 from "../koople/images/img8.jpg";

// 数据类型定义
interface Festival {
  id: string;
  name: string;
  isHot: boolean;
  templates: Template[];
}

interface Template {
  type: string;
  count: number;
  imageUrl: string;
}

// 模拟数据
const festivals: Festival[] = [
  {
    id: "dragon",
    name: "免抠元素",
    isHot: true,
    templates: [
      {
        type: "端午节元素",
        count: 80,
        imageUrl: img1,
      },
      {
        type: "儿童节免抠素材",
        count: 100,
        imageUrl: img2,
      },
      {
        type: "电商购物免抠元素",
        count: 63,
        imageUrl: img3,
      },
      {
        type: "城市设计元素",
        count: 152,
        imageUrl: img4,
      },
      {
        type: "小满节素材",
        count: 76,
        imageUrl: img5,
      },
      {
        type: "高考元素字体",
        count: 80,
        imageUrl: img6,
      },
      {
        type: "毕业季元素",
        count: 100,
        imageUrl: img7,
      },
      {
        type: "中式纹理边框元素",
        count: 137,
        imageUrl: img8,
      },
    ],
  },
  {
    id: "children",
    name: "3D素材",
    isHot: true,
    templates: [
      {
        type: "3D电商展台",
        count: 266,
        imageUrl: img3,
      },
      {
        type: "3D节目场景",
        count: 259,
        imageUrl: img4,
      },
      {
        type: "端午节3D素材",
        count: 60,
        imageUrl: img5,
      },
      {
        type: "夏日设计素材",
        count: 80,
        imageUrl: img6,
      },
      {
        type: "商务微软元素",
        count: 162,
        imageUrl: img1,
      },
      {
        type: "电商促销元素",
        count: 121,
        imageUrl: img7,
      },
      {
        type: "潮流趣味元素",
        count: 48,
        imageUrl: img2,
      },
      {
        type: "生活教育3D元素",
        count: 195,
        imageUrl: img8,
      },
    ],
  },
  {
    id: "summer",
    name: "原创插画",
    isHot: false,
    templates: [
      {
        type: "端午节插画",
        count: 94,
        imageUrl: img2,
      },
      {
        type: "夏日潮流插画",
        count: 215,
        imageUrl: img3,
      },
      {
        type: "小满插画",
        count: 70,
        imageUrl: img4,
      },
      {
        type: "520插画",
        count: 60,
        imageUrl: img5,
      },
      {
        type: "高考插画",
        count: 86,
        imageUrl: img7,
      },
      {
        type: "旅行手绘插画",
        count: 80,
        imageUrl: img8,
      },
      {
        type: "商务扁平插画",
        count: 92,
        imageUrl: img6,
      },
      {
        type: "电商购物插画",
        count: 121,
        imageUrl: img1,
      },
    ],
  },
  {
    id: "grain",
    name: "创意字体",
    isHot: false,
    templates: [
      {
        type: "劳动节艺术字",
        count: 100,
        imageUrl: img4,
      },
      {
        type: "青年节艺术节",
        count: 60,
        imageUrl: img5,
      },
      {
        type: "活动宣传标语",
        count: 130,
        imageUrl: img7,
      },
      {
        type: "蛇年精选字体",
        count: 65,
        imageUrl: img8,
      },
      {
        type: "科技智能艺术节",
        count: 132,
        imageUrl: img1,
      },
      {
        type: "党政党建艺术节",
        count: 77,
        imageUrl: img2,
      },
      {
        type: "英文创意字体",
        count: 80,
        imageUrl: img3,
      },
      {
        type: "新潮国风字体",
        count: 121,
        imageUrl: img6,
      },
    ],
  },
  {
    id: "eye",
    name: "AIGC-热点",
    isHot: false,
    templates: [
      {
        type: "春日氛围写真",
        count: 45,
        imageUrl: img3,
      },
      {
        type: "春日素材精选",
        count: 120,
        imageUrl: img1,
      },
      {
        type: "春日旅行素材",
        count: 100,
        imageUrl: img2,
      },
      {
        type: "低碳环保素材",
        count: 74,
        imageUrl: img5,
      },
      {
        type: "蛇年素材合集",
        count: 225,
        imageUrl: img6,
      },
      {
        type: "商务职场插画元素",
        count: 42,
        imageUrl: img7,
      },
      {
        type: "热销壁纸背景",
        count: 100,
        imageUrl: img4,
      },
      {
        type: "热门风格插画",
        count: 90,
        imageUrl: img8,
      },
    ],
  },
  {
    id: "gaokao",
    name: "AIGC-行业",
    isHot: true,
    templates: [
      {
        type: "新能源汽车",
        count: 65,
        imageUrl: img2,
      },
      {
        type: "半导体芯片电路",
        count: 165,
        imageUrl: img3,
      },
      {
        type: "金融理财投资",
        count: 35,
        imageUrl: img1,
      },
      {
        type: "微观细胞病毒",
        count: 123,
        imageUrl: img6,
      },
      {
        type: "商务职场白领",
        count: 60,
        imageUrl: img7,
      },
      {
        type: "3D图标CON",
        count: 120,
        imageUrl: img8,
      },
      {
        type: "C4D科技概念背景",
        count: 85,
        imageUrl: img4,
      },
      {
        type: "党建通用背景图",
        count: 75,
        imageUrl: img5,
      },
    ],
  }
];
export default function MarketingCalendar() {
  const [selectedFestival, setSelectedFestival] = useState<Festival>(
    festivals[0]
  );
  const [lockSelection, setLockSelection] = useState(false);
  const handleHover = (festival: Festival) => {
    if (!lockSelection) {
      setSelectedFestival(festival);
    }
  };
  const handleClick = (festival: Festival) => {
    setSelectedFestival(festival);
    setLockSelection(true);
  };

  return (
    <div className={styles.container}>
      <div className={styles.headerRow}>
        <h2 className={styles.sectionTitle}>行业趋势-设计素材</h2>
        <p className={styles.sectionDesc}>精选热点专题实时更新,热门素材轻松get~</p>
        <div className={styles.festivalList}>
          {festivals.map((festival) => (
            <div
              key={festival.id}
              className={`${styles.festivalItem} ${selectedFestival.id === festival.id ? styles.active : ""
                }`}
              onMouseEnter={() => handleHover(festival)}
              onMouseLeave={() => setLockSelection(false)}
              onClick={() => handleClick(festival)}
            >
              <div className={styles.festivalLeft}>
                <span className={styles.festivalName}>{festival.name}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className={styles.templateGallery}>
        {selectedFestival.templates.map((template) => (
          <div key={template.type} className={styles.templateCard}>
            <div className={styles.templateContent}>
              <div className={styles.templateImageContainer}>
                <img
                  src={template.imageUrl}
                  alt={template.type}
                  className={styles.templateImage}
                />
              </div>
              <div className={styles.templateInfo}>
                <h4>{template.type}</h4>
                <span>共{template.count}个作品</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}